<template>
  <div class="full c">
    <!-- Header -->
    <div class="w_full h_60 lh_50">
      <Header :headerName="headerName" :headerStyle="headerStyle" />
    </div>

    <!-- body -->
    <div class="w_full h_full-60 flex_row_around pb_15">
      <!-- 1 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p box_bgi p_10">
          <DataChart title="站点疫苗库存" path='' chartType="环状图" :chartData="chartData1" filterText="" :filterList="[]"
            :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
        <div class="w_full h_49_p box_bgi p_10">
          <DataChart title="站点免疫统计" path='' chartType="柱状图3" :chartData="chartData2" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
      </div>

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_49_p box_bgi p_10 relative flex_column_between">
          <div class="main_color chart_title">动防站负责人</div>
          <div class="w_full h_50_p">
            <img class="w_50_p absolute top_0 left_center border_radius_10 cursor object_fit_cover"
              src="../assets/images/img/def-user.png" alt="">
          </div>

          <div class="w_full h_25_p flex_column_start gap_10">
            <div class="flex_row_start">
              <div class="w_70 color_fff">姓名：</div>
              <div class="main_color">巴根那</div>
            </div>
            <div class="flex_row_start">
              <div class="w_70 color_fff">手机号：</div>
              <div class="main_color"> 178****1234</div>
            </div>
            <div class="flex_row_start">
              <div class="w_70 color_fff">地区：</div>
              <div class="main_color">乌审旗 {{ siteName }}</div>
            </div>
          </div>
        </div>
        <div class="w_full h_49_p box_bgi p_10">
          <div class="chart_title">疫苗信息</div>
          <div class="w_full h_full-25 flex_column_between gap_10">
            <div class="w_full h_60_p p_10">
              <img class="h_full border_radius_10 cursor object_fit_contain" src="../assets/images/img/kty.jpg" alt="">
            </div>
            <div class="w_full h_40_p flex_column_start gap_10">
              <div class="flex_row_start">
                <div class="w_100 color_fff">疫苗名称：</div>
                <div class="main_color">布病 A19 疫苗</div>
              </div>
              <div class="flex_row_start">
                <div class="w_100 color_fff">适用牲畜</div>
                <div class="main_color">牛、羊</div>
              </div>
              <div class="flex_row_start">
                <div class="w_100 color_fff">描述：</div>
                <div class="main_color">布病 A19 疫苗主要用于预防牛布鲁氏菌病。</div>
              </div>
            </div>
            <div class="w_full h_40_p color_fff">

            </div>
          </div>
        </div>
      </div>

      <!-- 3 -->
      <div class="w_32_p h_full flex_column_between gap_10">
        <div class="full box_bgi p_10">
          <div class="chart_title">防疫员信息</div>
          <div class="w_full h_full-25 scroll_box mt_10">
            <div class="w_full flex_row_between cursor bgc_3E4453 border_radius_10 mb_10" v-for="(item, index1) in 10"
              :key="index1" @click="clickCattle(item)">
              <div class="w_25_p h_150 p_5">
                <img class="h_full border_radius_10 object_fit_cover" src="../assets/images/img/def-user.png" alt="">
              </div>

              <div class="w_75_p h_150 flex_column_around pl_20 color_fff">
                <div class="fs_20">姓名 : 巴特尔 </div>
                <div class="fs_20">电话 : 178****2342 </div>
                <div class="fs_20">年龄 : 46 </div>
                <div class="fs_20">负责区域 : {{ siteName }} </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import Header from '../common/Header.vue'
import DataChart from '../components/data-chart/index.vue'
import { ref, reactive, computed, onMounted, watch, provide, nextTick } from 'vue'
import screenfull from 'screenfull'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const headerName = ref('牧户信息')
const headerStyle = reactive({
  color: '#00A295',
  fontWeight: 500,
  fontSize: '20px'
})

const siteName = ref(null)

let site_name = route.query.name
siteName.value = site_name
headerName.value = site_name + '动防站'

const muHuList = reactive([
  {
    nickName: '巴特尔',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '巴音',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '布和',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '那仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '牧仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '朝拉',
    phone: '121343333333',
    gender: '1',
    address: ''
  }
])

let chartData1 = reactive({ unit: '', data: [] })
let chartData2 = reactive({ x: [], data1: { name: '存栏', data: [] }, data2: { name: '免疫', data: [] } })
let chartData3 = reactive({ unit: '', x: [], y: [] })

onMounted(() => {
  initChart()
})

function initChart() {
  chartData1.unit = '毫升 / 头份'
  chartData1.data = [
    { name: '小反刍', value: 165298 },
    { name: '口蹄疫', value: 1098256 },
    { name: '布病A9', value: 10973 }
  ]

  chartData2.x = ['牛', '山羊', '绵羊', '猪'].reverse()
  chartData2.y = [2356, 1733, 1267, 321].reverse()

  chartData3.unit = '辆'
  chartData3.x = ['大型拖拉机', '小型拖拉机', '粉碎机', '播种机', '除草机'].reverse()
  chartData3.y = [1, 2, 2, 1, 3, 1].reverse()
}

function clickCattle(item) {
  router.push(`/fangYiYuanPage`)
}

</script>

<style>
.c {
  background-color: #0F1427;
}
</style>